.root
    display: flex
    justify-content: center
    align-items: center
    height: 100vh
    width: 100vw
    position relative
    overflow hidden
    background-image: url(https://cdn.code.znzmo.com/zhimo2.0_static/img/client/common/loginbgimg.png?v)
    background-size: cover
    .drag
        -webkit-app-region: drag
        position: absolute
        width: 95vw
        height: 0.5rem
        left: 0
        top: 0
    .close
        position: absolute
        top: 0.2rem
        right 0.2rem
        cursor pointer
    .bgImg
        position: absolute
        left 0
        top: 0
        height: 100%
        width: 100%
        z-index: -10
    .loginContainer
        display: flex
        flex-direction: column
        align-items: center
        width: 4rem
        height: 4.83rem
        background-color: rgba(0, 0, 0, 0.5)
        border-radius: 0.1rem
        h1
            position relative
            margin-top: 0.35rem
            font-size: 20px
            color: #ffffff
            &:after
                content: ' '
                position: absolute
                left: 50%
                bottom: -0.05rem
                width: 0.8rem
                height: 2px
                background-color: #ffffff
                transform: translateX(-50%)
.group
    position:relative;
    .upImg
        position: absolute
        right: 0
        top: 0.3rem
    .loginInput 
        font-size:14px;
        margin-top: 0.15rem
        padding:0.1rem 0.1rem 0.1rem 0.05rem;
        display:block;
        width:3rem;
        border:none;
        color: #ffffff
        border-bottom:1px solid #757575;
        background-color: transparent
        &:focus 
            outline:none
        &:focus ~ label,&:valid ~ label
            top: 0;
            font-size:14px;
            color:#ffffff;
        &:focus ~ .bar:before, &:focus ~ .bar:after
            width:50%;
    label
        color:#999; 
        font-size:14px;
        font-weight:normal;
        position:absolute;
        pointer-events:none;
        left:5px;
        top:0.25rem;
        transition:0.2s ease all; 
        -moz-transition:0.2s ease all; 
        -webkit-transition:0.2s ease all;
    .bar 
        position:relative; 
        display:block; 
        width:300px;
        &:after
            right: 50%
        &:before
            left: 50%
        &:after, &:before
            content:'';
            height:2px; 
            width:0;
            bottom:1px; 
            position:absolute;
            background:#1DBCBC; 
            transition:0.2s ease all; 
            -moz-transition:0.2s ease all; 
            -webkit-transition:0.2s ease all;
    .highlight
        position:absolute;
        height:60%; 
        width:100px; 
        top:25%; 
        left:0;
        pointer-events:none;
        opacity:0.5;


.operation
    width: 3rem
    display: flex
    justify-content: space-between
    align-items: center
    margin-top: 0.2rem
    .text
        cursor pointer
        font-size: 12px
        color: #ffffff

.buttonContainer
    width: 3.2rem
    margin-top: 0.3rem
    padding-left: 0.22rem
    padding-right: 0.22rem
    display: flex
    justify-content: space-between
    align-items: center
    .button
        height: 0.32rem
        width: 1.2rem
        border-radius: 0.16rem
        color: #ffffff
        font-size: 14px

.threeTitle
    position relative
    font-size: 12px
    color: #999999
    margin-top: 0.4rem
    &:before
        position absolute
        left -1rem
        top 8px
        content ' '
        height 1px
        width 0.8rem
        background-color #666666
    &:after
        position absolute
        right -1rem
        top 8px
        content ' '
        height 1px
        width 0.8rem
        background-color #666666

.threeLoginContainer
    display: flex
    justify-content: space-between
    width: 1.6rem
    margin-top: 0.2rem
    font-size: 0.24rem
    color: #fff